<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/static/js/jquery-3.js}"></script>
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>

    <style type="text/css">
        .layui-form-selectup dl{
            top:42px;
            bottom:unset;
        }
    </style>

</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>修改Banner</legend>
</fieldset>

<form class="layui-form" onsubmit="return false">

    <div class="layui-form-item">
        <label class="layui-form-label">ID&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.id}" type="text" name='id' id="id" lay-verify="required" readonly="readonly" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">页面编号&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.pagenumber}" type="text" name='pagenumber' id="pagenumber" lay-verify="required" lay-reqtext="页面编号" placeholder="页面编号" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片标题&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.imgalt}" type="text" name='imgalt' id="imgalt" lay-verify="required" lay-reqtext="链接地址为必填项" placeholder="请输入链接地址" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div >

    <div class="layui-form-item">
        <label class="layui-form-label">上传图片&nbsp;:</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
            <input class="layui-upload-file" type="file" accept="" name="file">
            <div class="layui-upload-list">
                <img th:src="${bannerPO.img}" class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>

        <div class="layui-form-item" id="uri">
            <label class="layui-form-label">图片路径&nbsp;:</label>
            <div class="layui-input-block">
                <input type="text" name='img' id="img" readonly="readonly" lay-verify="required" lay-reqtext="图片路径" th:value="${bannerPO.img}" autocomplete="off"  style="width:500px;"   class="layui-input" >
            </div>
        </div>

    <div class="layui-form-item">
        <label class="layui-form-label">名称&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.name}" type="text" name='name' id="name" lay-verify="required" lay-reqtext="名称" placeholder="名称" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">链接地址&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.linkpath}" type="text" name='linkpath' id="linkpath" lay-verify="required" lay-reqtext="Banner的链接地址" placeholder="Banner的链接地址" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序&nbsp;:</label>
        <div class="layui-input-block">
            <input th:value="${bannerPO.sort}" type="text" name='sort' id="sort" lay-verify="required" lay-reqtext="排序为必填项" placeholder="请输入排序" autocomplete="off"  style="width:500px;"   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态&nbsp;:</label>
        <div class="layui-input-block">
            <select name="state" id="state" lay-verify="required" style="width:500px; height: 38px;" class="layui-form-selectup">
                <option value="">请选择</option>
                <option  th:selected="${bannerPO.state == 0}" value="0">停用</option>
                <option th:selected="${bannerPO.state == 1}" value="1">启用</option>
            </select>
        </div>
    </div>

    <div  class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">起始时间&nbsp;:</label>
            <div class="layui-input-inline">
                <input th:value="${#dates.format(bannerPO.begindate,'yyyy-MM-dd:HH:ss:mm')}" type="text" class="layui-input" name="beginTime" placeholder="yyyy-MM-dd">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">结束时间&nbsp;:</label>
            <div class="layui-input-inline">
                <input th:value="${#dates.format(bannerPO.enddate,'yyyy-MM-dd:HH:ss:mm')}" type="text" class="layui-input" name="endTime" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="editBtn">修改</button>
        </div>
    </div>
</form>

<script>

    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test7'
            , url: '/upload' //改成您自己的上传接口
            , before: function (obj) {
                console.log("map--Obj======"+obj)
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }else {

                    $('#img').val(res.url); //图片链接（base64）
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        })
    })
</script>

<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //常规用法
        //常规用法
        laydate.render({
            elem: '#beginTime'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#endTime'
            ,type: 'datetime'
        });

    })
</script>

<script>

    var basePath="/";

    layui.use(['form'],function () {

        var thisIndex = parent.layer.getFrameIndex(window.name);

        var form = layui.form;
        var parentLayer = parent.layer;
        form.on("submit(editBtn)",function (data) {
            let data2Send = data.field;
            alert(JSON.stringify(data2Send))
            $.ajax({
                url:"/banner-edit",
                type:"POST",
                contentType:"application/json",
                data:JSON.stringify(data2Send),
                success:function (data){
                    if(data.success){
                        parentLayer.msg(data.message,{
                            icon: 1,
                            time: 10000
                        });
                    }else{
                        parentLayer.msg(data.message,{
                            icon: 1,
                            time: 2000
                        });
                    }
                    parent.location.reload();
                }
            })

        })
    })

</script>

</body>
</html>